import React, { useState } from "react";
import { Contact } from "./interface";

interface EditContactProps {
  savedContact: Contact;
  onSave: (contact: Contact) => void;
}
const EditContact: React.FC<EditContactProps> = ({ savedContact, onSave }) => {
  const [name, setName] = useState(savedContact.name);
  const [email, setEmail] = useState(savedContact.email);

  return (
    <section>
      <label>
        姓名：
        <input type="text" value={name} onChange={e => setName(e.target.value)} />
      </label>
      <label>
        邮箱：
        <input type="email" value={email} onChange={e => setEmail(e.target.value)} />
      </label>
      <br />
      <button
        onClick={() => {
          const updateData: Contact = {
            id: savedContact.id,
            name,
            email
          };
          onSave(updateData);
        }}
      >
        保存
      </button>
      <button
        onClick={() => {
          setName(savedContact.name);
          setEmail(savedContact.email);
        }}
      >
        重置
      </button>
    </section>
  );
};
export default EditContact;
